<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>53种纯CSS3炫酷loading指示器动画特效</title>
<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/loaders.css" />
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>

<div class="wrapper nano" style="background-color: #98bff6; color: #98bff6;">
	<div class="nano-content">
	<main>
		<div class="items-list-helper">
			<span style="background-color: #98bff6;"><i class="fa fa-info-circle"></i> 将你的鼠标移动到图标上查看效果</span>
		</div>
		<div class="items items-list">
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-8bits la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-8bits.html">Ball 8bits<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-atom la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-atom.html">Ball Atom<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-beat la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-beat.html">Ball Beat<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-circus la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-circus.html">Ball Circus<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-climbing-dot la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-climbing-dot.html">Ball Climbing Dot<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-clip-rotate la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-clip-rotate.html">Ball Clip Rotate<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-clip-rotate-multiple la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-clip-rotate-multiple.html">Ball Clip Rotate Multiple<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-clip-rotate-pulse la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-clip-rotate-pulse.html">Ball Clip Rotate Pulse<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-elastic-dots la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-elastic-dots.html">Ball Elastic Dots<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-fall la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-fall.html">Ball Fall<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-fussion la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-fussion.html">Ball Fussion<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-grid-beat la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-grid-beat.html">Ball Grid Beat<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-grid-pulse la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-grid-pulse.html">Ball Grid Pulse<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-newton-cradle la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-newton-cradle.html">Ball Newton Cradle<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-pulse la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-pulse.html">Ball Pulse<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-pulse-rise la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-pulse-rise.html">Ball Pulse Rise<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-pulse-sync la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-pulse-sync.html">Ball Pulse Sync<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-rotate la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-rotate.html">Ball Rotate<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-running-dots la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-running-dots.html">Ball Running Dots<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-scale la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-scale.html">Ball Scale<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-scale-multiple la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-scale-multiple.html">Ball Scale Multiple<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-scale-pulse la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-scale-pulse.html">Ball Scale Pulse<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-scale-ripple la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-scale-ripple.html">Ball Scale Ripple<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-scale-ripple-multiple la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-scale-ripple-multiple.html">Ball Scale Ripple Multiple<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin.html">Ball Spin<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin-clockwise la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin-clockwise.html">Ball Spin Clockwise<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin-clockwise-fade la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin-clockwise-fade.html">Ball Spin Clockwise Fade<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin-clockwise-fade-rotating la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin-clockwise-fade-rotating.html">Ball Spin Clockwise Fade Rotating<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin-fade la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin-fade.html">Ball Spin Fade<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin-fade-rotating la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin-fade-rotating.html">Ball Spin Fade Rotating<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-spin-rotate la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-spin-rotate.html">Ball Spin Rotate<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-square-clockwise-spin la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-square-clockwise-spin.html">Ball Square Clockwise Spin<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-square-spin la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-square-spin.html">Ball Square Spin<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-triangle-path la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-triangle-path.html">Ball Triangle Path<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-zig-zag la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-zig-zag.html">Ball Zig Zag<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-ball-zig-zag-deflect la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/ball-zig-zag-deflect.html">Ball Zig Zag Deflect<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-cog la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/cog.html">Cog<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-cube-transition la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/cube-transition.html">Cube Transition<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-fire la-2x">
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/fire.html">Fire<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-scale la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-scale.html">Line Scale<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-scale-party la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-scale-party.html">Line Scale Party<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-scale-pulse-out la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-scale-pulse-out.html">Line Scale Pulse Out<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-scale-pulse-out-rapid la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-scale-pulse-out-rapid.html">Line Scale Pulse Out Rapid<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-spin-clockwise-fade la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-spin-clockwise-fade.html">Line Spin Clockwise Fade<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-spin-clockwise-fade-rotating la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-spin-clockwise-fade-rotating.html">Line Spin Clockwise Fade Rotating<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-spin-fade la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-spin-fade.html">Line Spin Fade<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-line-spin-fade-rotating la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/line-spin-fade-rotating.html">Line Spin Fade Rotating<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-pacman la-2x">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/pacman.html">Pacman<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-square-jelly-box la-2x">
							<div></div>
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/square-jelly-box.html">Square Jelly Box<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-square-loader la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/square-loader.html">Square Loader<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-square-spin la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/square-spin.html">Square Spin<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-timer la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/timer.html">Timer<span>&#8594;</span></a></div>
			</div>
			<div class="item">
				<div class="item-inner">
					<div class="item-loader-container">
						<div class="la-triangle-skew-spin la-2x">
							<div></div>
						</div>
					</div>
				</div>
				<div class="item-title"><a href="animations/triangle-skew-spin.html">Triangle Skew Spin<span>&#8594;</span></a></div>
			</div>
		</div>
	</main>
	
	</div>
	
</div>

<script type="text/javascript" src="assets/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins.min.js"></script>
<script type="text/javascript" src="assets/script.min.js"></script>

</body>
</html>